<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nodejsdemo</title>
    <script type="text/javascript" src="/javascripts/jquery.min.js"></script>
    <script type="text/javascript" src="/javascripts/bootstrap.js"></script>
    <link rel="stylesheet" href="/stylesheets/bootstrap.css">
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<% include header.ejs %>
<div class="container">
    <div class="btn-toolbar">
        <button type="button" class="btn btn-primary" onclick="location.href='/users/addUser'">添加</button>
    </div>
    <div>
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <% userList.forEach(function(user){ %>
            <tr>
                <td><%= user.id %></td>
                <td><%= user.name %></td>
                <td><%= user.age %></td>
                <td>
                    <a href="/users/query?id=<%= user.id %>"><span class="label label-info">查看</span></a>
                    <a href="/users/queryForUpdate?id=<%= user.id %>"><span class="label label-warning">修改</span></a>
                    <a href="/users/deleteUser?id=<%= user.id %>"><span class="label label-danger">删除</span></a>
                </td>
            </tr>
            <% }) %>
            </tbody>
        </table>
        <nav>
            <ul class="pagination">
                <li>
                    <a href="/users/queryAll?pageNum=<%= pageNum - 1 == 0 ? 1 : pageNum - 1 %>">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <% for(var i = 0;i < userListSize;i++){ %>
                <li class="<%= i + 1 == pageNum ? 'active' : '' %>">
                    <a href="/users/queryAll?pageNum=<%= i + 1 %>"><%= i + 1 %>
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <% } %>
                <li>
                    <a href="/users/queryAll?pageNum=<%= pageNum + 1 > userListSize ? userListSize : pageNum + 1 %>">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

<!-- /.container -->

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">关于</h4>
            </div>
            <div class="modal-body" id="myModalBody">
                nodejs express框架演示
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    function showModal(){
        $('#myModal').modal();
    }

    function moreModal() {
        $("#myModalLabel").html('更多');
        $("#myModalBody").html('没有更多');
        showModal();
    }
</script>

</body>
</html>
